<template>
  <!-- 全院资产 -->
  <div class="statistic-item">
    <div class="ring-content">
      <ve-ring
        :settings="chartSettings"
        class="ring-chart"
        width="180px"
        height="160px"
        :judge-width="true"
        :data="chartData"
        :legend-visible="false"
        :tooltip-visible="false"
        :colors="colors"
      ></ve-ring>
      <div class="overview">
        <div class="total">{{ total }}<span>件</span></div>
        <div>当前资产总数</div>
      </div>
      <div class="more" >
        <group border="0">
        <popup-picker
            :key="1"
            :data="classList"
            show-name
            v-model="classId"
            @on-change="changeList"
            text-align="center"
          ></popup-picker>
        </group>
      </div>
    </div>
    <div class="static-table">
      <div class="label" v-for="(item, index) in overviewData" :key="index" @click="toDetail(item.classId)">
        <div class="label-name">
          <span class="name-icon" :style="`backgroundColor:${colors[index]}`"></span>
          <span>{{ item.className ||item.parentName }}</span>
        </div>
        <div class="label-number">
          <div>
            <span class="number">{{ item.subtotal }}</span
            ><span class="unit">件</span>
          </div>
          <div class="percentage">
            <span :style="`color:${colors[index]}`">{{ item.percentage }}%</span>
          </div>
        </div>
        <div class="more">
          <x-icon type="ios-arrow-right" color="#5188c6" size="16"></x-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AssetApi from "@/api/asset.js";
import VeRing from "v-charts/lib/ring.common";
import { Group, PopupPicker } from "vux"
const colors = ["#446abd", "#87c26e", "#febe57", "#f05b5d", "#61bad9","#446aca", "#82b26e", "#fece57", "#f05b3a", "#11bad9","#126acd", "#87b16e", "#feba47", "#f46b5d", "#61acd9","#446abd", "#87c26e", "#febe57", "#f05b5d", "#61bad9"];
export default {
  components: { VeRing, Group, PopupPicker },
  data() {
    return {
      chartData: {
        columns: ["名称", "数量"],
        rows: [],
      },
      chartSettings: {
        radius: [40, 64],
        offsetY: 80,
        offsetX: 10,
        hoverAnimation: false,
        label: {
          show: false, // 隐藏品牌型号
        },
        labelLine: {
          show: false, // 隐藏品牌型号
        },
      },
      total: null,
      colors: colors,
      overviewData: [],
      classList: [[]],
      classId: [],
    };
  },
  created() {
    this.classId = [this.$route.query.classId]
    this.getAllAsset()
    this.assetClass()
  },
  methods: {
    changeList(){
      this.getAllAsset()
    },
    assetClass() {
      let _params = {
        pageNum: 1,
        pageSize: 1000,
      };
      AssetApi.assetClass(_params).then((res) => {
        if (res.code == "0000") {
          let _classList =
            res.data.records.map((item) => {
              let temp = {
                name: item.name,
                value: item.id.toString(),
              };
              return temp;
            }) || [];
          _classList.unshift({ name: "所有分类", value: "" });
          this.classList = [_classList];
        }
      });
    },
    async getAllAsset(){
      this.chartData.rows = []
      let _params = {
        parentId : this.classId[0]
      }
      let {data:{total,list}} = await AssetApi.statisicsAllAsset(_params)
      this.total = total
      this.overviewData = list.map(item=>{
        let temp = item
        temp.className = item.className||item.parentName
        temp.classId = item.classId||item.parentId
        let row = { 名称: temp.className, 数量: temp.subtotal }
        this.chartData.rows.push(row)
        temp.percentage = Math.round(item.subtotal/total * 100)
        return temp 
      })
      console.log(133,this.chartData.rows)
    },
    toDetail(classId=""){
      this.$router.push({
        name:"search",
        params:{
          classId:[this.$route.query.classId,classId]
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
.ring-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  .ring-chart {
  }
  .overview {
    color: #999;
    font-size: 13px;
    margin-left: 15px;
    .total {
      color: rgb(44, 108, 189);
      font-size: 36px;
      span {
        font-size: 14px;
      }
    }
  }
  /deep/.more {
    font-size: 14px;
    color: rgb(81, 136, 198);
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;

    .weui-cells{
      background: transparent;
      &::before{
        border-top:none;
      }
      &::after{
        border-bottom:none;
      }
    }
  }
}
.static-table {
  .label {
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0 30px 0 10px;
    border-bottom: 1px solid #f1f1f1;

    .more {
      position: absolute;
      display: flex;
      align-items: center;
      height: 50px;
      right: 10px;
    }
    .label-name {
      color: #333;
      font-size: 13px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .name-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 2px;
        margin-right: 10px;
        margin-bottom: 2px;
      }
    }
    .label-number {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      .number {
        font-size: 16px;
      }
      .unit {
        font-size: 12px;
      }
    }
    .percentage {
      width: 36px;
      text-align: right;
    }
  }
}
</style>
